<template xmlns:el-col="http://www.w3.org/1999/html">
  <de-layout-content :header="$t('消息接收管理')">
    <el-col>
      <el-row class="tree-head">
        <span style="float: left;">{{
          $t("webmsg.type")
        }}</span>
        <span
          v-for="channel in msg_channels"
          :key="channel.msgChannelId"
          class="auth-span"
        >
          {{ $t(channel.channelName) }}
        </span>
      </el-row>
      <el-row class="msg-setting" style="margin-top: 5px">
        <el-tree
          :props="defaultProps"
          :data="treeData"
          default-expand-all
          :node-key="defaultProps.id"
          :highlight-current="highlightCurrent"
          @node-click="nodeClick"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>
              <span style="margin-left: 6px">{{
                $t("webmsg." + data.name)
              }}</span>
            </span>
            <span @click.stop>
              <div>
                <span
                  v-for="channel in msg_channels"
                  :key="channel.msgChannelId"
                  class="auth-span-check"
                >
                  <el-checkbox
                    v-if="data.children && data.children.length > 0"
                    v-model="data.check_all_map[channel.msgChannelId]"
                    :indeterminate="
                      data.indeterminate_map[channel.msgChannelId]
                    "
                    @change="parentBoxChange(node, channel)"
                  />
                  <el-checkbox
                    v-else
                    v-model="data.check_map[channel.msgChannelId]"
                    @change="childBoxChange(node, channel)"
                  />
                </span></div
            ></span>
          </span>
        </el-tree>
      </el-row>
    </el-col>
  </de-layout-content>
</template>

<script>
import DeLayoutContent from "@/components/business/DeLayoutContent";
import {
  treeList,
  channelList,
  settingList,
  updateSetting,
  batchUpdate,
} from "@/api/system/msg";
export default {
  name: "LazyTree",
  components: { DeLayoutContent },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
        id: "id",
      },
      highlightCurrent: true,

      msg_channels: [],
      setting_data: {},
    };
  },
  computed: {},
  mounted() {},
  beforeCreate() {
    // this.loadChannelData()

    channelList().then((res) => {
      this.msg_channels = res.data;
    });
  },
  created() {
    this.loadSettingData(this.loadTreeData);
  },

  methods: {
    // 加载树节点数据
    loadTreeData() {
      treeList().then((res) => {
        const datas = res.data;
        datas.forEach((data) => this.formatTreeNode(data));
        this.treeData = datas;
      });
    },
    formatTreeNode(node) {
      if (node.children && node.children.length > 0) {
        node.check_all_map = {};
        node.indeterminate_map = {};
        node.indeterminate_number_map = {};
        const kidSize = node.children.length;
        node.children.forEach((kid) => {
          this.formatTreeNode(kid);
          const isLeaf = !kid.children || kid.children.length === 0;
          const tempMap = isLeaf ? kid.check_map : kid.indeterminate_map;
          for (const key in tempMap) {
            if (Object.hasOwnProperty.call(tempMap, key)) {
              const element = tempMap[key];
              node.indeterminate_number_map[key] =
                node.indeterminate_number_map[key] || 0;
              if (element) {
                node.indeterminate_number_map[key]++;
              }

              if (
                node.indeterminate_number_map[key] === kidSize &&
                (isLeaf || kid.check_all_map[key])
              ) {
                node.check_all_map[key] = true;
                node.indeterminate_map[key] = false;
              } else if (node.indeterminate_number_map[key] > 0) {
                node.check_all_map[key] = false;
                node.indeterminate_map[key] = true;
              }
            }
          }
        });
      } else {
        node.check_map = {};
        this.msg_channels.forEach((channel) => {
          node.check_map[channel.msgChannelId] = this.checkBoxStatus(
            node,
            channel
          );
        });
        // this.checkBoxStatus(node, )
      }
    },
    // 加载消息渠道
    loadChannelData() {
      channelList().then((res) => {
        this.msg_channels = res.data;
      });
    },
    // 加载用户设置信息
    loadSettingData(callBack) {
      // this.setting_data = {}
      const temp_setting_data = {};
      settingList().then((res) => {
        const lists = res.data;
        lists.forEach((item) => {
          const key = item.typeId + "";
          if (!Object.keys(temp_setting_data).includes(key)) {
            temp_setting_data[key] = [];
          }
          temp_setting_data[key].push(item);
        });
        this.setting_data = temp_setting_data;
        callBack && callBack();
      });
    },
    checkBoxStatus(node, channel) {
      // const nodeId = node.data.id
      const nodeId = node.id;
      return (
        this.setting_data[nodeId] &&
        this.setting_data[nodeId].some(
          (item) => item.channelId === channel.msgChannelId && item.enable
        )
      );
    },

    nodeClick(data, node) {},
    getAllKidId(node, ids) {
      if (node.children && node.children.length > 0) {
        node.children.forEach((item) => this.getAllKidId(item, ids));
      } else {
        ids.push(node.id);
      }
    },
    parentBoxChange(node, channel) {
      const typeIds = [];
      this.getAllKidId(node.data, typeIds);
      const channelId = channel.msgChannelId;

      const data = node.data;
      const enable = data.check_all_map && data.check_all_map[channelId];
      node.data.check_all_map[channelId] = enable;
      node.data.indeterminate_map[channelId] = false;
      node.data.children.forEach((item) => {
        item.check_map = item.check_map || {};
        item.check_map[channelId] = enable;
      });

      const param = {
        typeIds: typeIds,
        channelId: channelId,
        enable,
      };
      batchUpdate(param).then((res) => {
        this.loadSettingData(this.loadTreeData);
      });
    },
    childBoxChange(node, channel) {
      const channelId = channel.msgChannelId;
      const parent = node.parent;
      if (parent) {
        const data = parent.data;
        const kids = data.children;
        const kidSize = kids.length;
        let index = 0;
        kids.forEach((kid) => {
          if (kid.check_map[channelId]) {
            index++;
          }
        });
        if (index === kidSize) {
          node.parent.data.check_all_map[channelId] = true;
          node.parent.data.indeterminate_map[channelId] = false;
        } else if (index > 0) {
          node.parent.data.check_all_map[channelId] = false;
          node.parent.data.indeterminate_map[channelId] = true;
        } else {
          node.parent.data.check_all_map[channelId] = false;
          node.parent.data.indeterminate_map[channelId] = false;
        }
        // this.formatTreeNode(node.parent.data)
      }

      const param = {
        typeId: node.data.id,
        channelId: channelId,
      };
      updateSetting(param).then((res) => {
        this.loadSettingData(this.loadTreeData);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-left: 8px;
  padding-right: 32px;
}
.tree-main {
  overflow-y: auto;
}
.tree-head {
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
  border-top: 1px solid var(--TableBorderColor, #e6e6e6);
  background-color: var(--SiderBG, #f7f8fa);
  font-size: 12px;
  color: var(--TableColor, #3d4d66);
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  padding: 0 12px
}

.auth-span {
  float: right;
  margin-left: 24px;
}

.auth-span-check {
  float: right;
  margin-left: 64px;
}
</style>
<style lang="scss">
.msg-setting {
  .el-tree-node__content {
    height: 46px;
    border-bottom: 1px solid rgba(31, 35, 41, 0.15);
    &:hover {
      background-color: var(--deWhiteHover, #3370ff) !important;
      .custom-tree-node {
        color: var(--primary, #3370ff);
      }
    }
  }
}
</style>